<script setup>
  /**
   * File List component for sale related files
   *
   */
  import { onMounted, provide, ref, toRaw } from 'vue'
  import { useSaleFileStore, useSaleFileConfigStore } from '@/stores/saleFiles'

  import { storeToRefs } from 'pinia'
  import { PROVIDE_KEY } from '../consts.js'
  import FileAddEditComponent from '@/views/files/addedit/FileAddEditComponent.vue'

  import { useIndicatorStore } from '@/stores/indicators'
  import Button from '@/components/Button.vue'
  import IconSpan from '@/components/IconSpan.vue'
  import UploadWidget from '@/components/filedrop/UploadWidget.vue'
  import useFileList from '@/components/filedrop/file-list'
  import ProjectNode from './ProjectNode.vue'
  import { getTaskMainNumber, NODE_TYPE_LABELS } from '@/helpers/node'

  const props = defineProps({
    /**
     * The current project id and the formConfigUrl to load the needed options
     */
    projectId: { type: Number, required: true },
    formConfigUrl: String,
    title: String,
    businessId: { type: Number, required: false },
    taskId: { type: Number, required: false },
  })
  // On prépare nos stores
  const saleFileStore = useSaleFileStore()
  const SaleFileFormConfigStore = useSaleFileConfigStore()
  SaleFileFormConfigStore.setUrl(props.formConfigUrl)

  saleFileStore.setContext(props.projectId, props.businessId, props.taskId)

  // On récupère l'arbre de données (devis/Factures/affaires)
  const { tree: nodeTree, templates, nodesById } = storeToRefs(saleFileStore)

  // Ref utilisé pour la vue courante
  const showAddEdit = ref(false)
  const currentFileRequirement = ref(null)
  const currentFile = ref(null)
  const currentNode = ref(null)
  const error = ref(false)
  const loading = ref(true)
  const uploadRunning = ref(false)

  // Actions disponible pour la manipulation des fichiers
  const onFileAdd = (node, file_requirement) => {
    currentFileRequirement.value = file_requirement
    currentNode.value = node
    showAddEdit.value = true
  }

  const onUploadMultiple = async (files) => {
    uploadRunning.value = true
    const { reset: resetTempFileList } = useFileList()
    const parentId = props.taskId || props.businessId || props.projectId

    await saleFileStore.addMultipleFiles(files, parentId)
    resetTempFileList()
    uploadRunning.value = false
  }

  const onFileEdit = (node, file, file_requirement) => {
    currentFile.value = file
    currentFileRequirement.value = file_requirement
    currentNode.value = node
    showAddEdit.value = true
  }

  const onFileDelete = (file, node, requirement) => {
    if (window.confirm('Êtes-vous sûr de vouloir supprimer ce fichier?')) {
      saleFileStore.deleteFile(file, node, requirement)
    }
  }

  const onFileDownload = (file) => saleFileStore.downloadFile(file.id)

  const onTemplate = (node, file_requirement, task_context) =>
    saleFileStore.template(node, file_requirement, task_context)
  const onDirectTemplate = (businessId, file_type_id, task_context) => {
    if (!file_type_id) {
      alert('Veuillez séléctionner un modèle de fusion')
    } else {
      saleFileStore.template(
        { business_id: businessId },
        { file_type_id: file_type_id },
        task_context
      )
    }
  }

  const onFileRequirementValidate = (node, fileRequirement) => {
    const indicatorStore = useIndicatorStore()
    indicatorStore.validateIndicator(fileRequirement)
  }
  const onDownloadAll = () => saleFileStore.downloadAll()

  // Injection des méthodes pour pouvoir y accéder depuis plus bas dans l'arbre
  provide(PROVIDE_KEY, {
    onFileEdit: onFileEdit,
    onFileAdd: onFileAdd,
    onFileDelete: onFileDelete,
    onFileDownload: onFileDownload,
    onTemplate: onTemplate,
    onFileRequirementValidate: onFileRequirementValidate,
  })

  const onCloseAddEditPopup = () => {
    currentFile.value = null
    currentFileRequirement.value = null
    currentNode.value = null
    showAddEdit.value = false
  }

  // Récupère toutes les tasks de l'affaire
  function getTasksFromNodes() {
    const nodes = toRaw(nodesById.value)
    const result = []
    for (let [id, node] of Object.entries(nodes)) {
      if (node.type_.includes('estimation') || node.type_.includes('invoice')) {
        let task_label =
          NODE_TYPE_LABELS[node.type_] +
          ' ' +
          getTaskMainNumber(node) +
          ' (' +
          node.name +
          ')'
        result.push({ key: node.id, value: task_label })
      }
    }
    return result
  }

  onMounted(async () => {
    // Chargement des données (await toujours en fin de setup)
    try {
      loading.value = true
      await saleFileStore.loadTaskTree()
      await SaleFileFormConfigStore.loadConfig()
      if (props.businessId) {
        await saleFileStore.loadBusinessTemplates(props.businessId)
      }
      error.value = false
    } catch (e) {
      console.error(e)
      error.value = `Erreur au chargement des fichiers ${e}`
    } finally {
      loading.value = false
    }
  })
</script>
<template>
  <p class="alert alert-danger" v-if="error">
    Erreur au chargement de la liste des fichiers
  </p>
  <p class="alert alert-info" v-else-if="loading">Chargement des fichiers...</p>
  <div v-else>
    <div
      class="layout flex two_cols content_vertical_padding separate_bottom_dashed"
    >
      <div role="group" class="vertical_align_center">
        <a v-if="businessId" href="#templates_form">
          <IconSpan name="file-redo" alt="" />
          Générer un fichier depuis un modèle
        </a>
      </div>
      <div role="group" class="align_right">
        <Button
          icon="download"
          label="Télécharger"
          extendedLabel="tous les fichiers"
          class="btn icon"
          title="Télécharger tous les fichiers attachés à ce dossier dans un fichier compressé"
          @click="onDownloadAll"
          :show-label="true"
        />
      </div>
    </div>

    <UploadWidget
      @upload="onUploadMultiple"
      :waiting="uploadRunning"
    ></UploadWidget>

    <ProjectNode
      :projectTree="nodeTree"
      :business-id="businessId"
      :task-id="taskId"
    />

    <div id="templates_form" class="content_vertical_padding" v-if="businessId">
      <hr />
      <h3>Générer un fichier depuis un modèle</h3>
      <div v-if="templates.length == 0" class="alert alert-info">
        Aucun modèle de document disponible pour cette affaire
      </div>
      <div v-else>
        <div class="alert alert-info">
          <p>
            Génération d'un fichier depuis un des modèles de fusion disponibles
            pour l'affaire.
          </p>
          <br />
          <p>
            Si un devis est donné en contexte ses informations pourront être
            utilisées par le modèle configuré.
          </p>
          <p>
            Si c'est une facture les informations du devis d'origine (si
            existant) et de la facture elle-même seront disponibles.
          </p>
        </div>
        <div class="content_vertical_padding">
          <label for="template-model"><small>Modèle</small></label> &nbsp;
          <select
            id="template-model"
            class="form-control"
            aria-label="Modèle de document à utiliser"
            v-model="templateFile"
            required
          >
            <option
              v-for="template in templates"
              :key="template.file_type_id"
              :value="template.file_type_id"
            >
              {{ template.file_type_label }}
            </option>
          </select>
          &nbsp;&nbsp;&nbsp;
          <label for="template-context"><small>Contexte</small></label> &nbsp;
          <select
            id="template-context"
            class="form-control"
            aria-label="Contexte pour la génération du fichier"
            v-model="templateContext"
          >
            <option value="0">- Aucun contexte -</option>
            <option
              v-for="node in getTasksFromNodes()"
              :key="node.key"
              :value="node.key"
            >
              {{ node.value }}
            </option>
          </select>
          &nbsp;&nbsp;&nbsp;
          <Button
            class="btn icon"
            icon="file-redo"
            label="Générer le fichier"
            title="Générer le fichier depuis ce modèle"
            @click="onDirectTemplate(businessId, templateFile, templateContext)"
            :show-label="true"
          />
        </div>
      </div>
    </div>
    <FileAddEditComponent
      v-if="showAddEdit"
      :file="currentFile"
      :parent="currentNode"
      :file-requirement="currentFileRequirement"
      @cancel="onCloseAddEditPopup"
      @saved="onCloseAddEditPopup"
    />
  </div>
</template>
